<template>
  <div class="setting">
    <el-card>
      <!-- tab导航栏 -->
      <el-tabs>
        <!-- lazing表示延迟加载tab栏每一项的数据，当点击到当前项的tab时才向后台发起请求 -->
        <el-tab-pane label="角色管理" lazing>
          <el-button type="primary" class="addrole" style="margin-left:30px" @click="addRole">新增角色</el-button>
          <el-table :data="tableList" border style="margin-left:30px">
            <!-- <el-table-column label="序号" type="index" width="80px" /> -->
            <!-- 把序号改成角色的真正序号，而不是每页都从1开始 -->
            <el-table-column lable="序号">
              <template v-slot="{$index}">
                <!-- 真实实现序号 -->
                {{ (page.page-1)*page.pagesize+$index+1 }}
              </template>
            </el-table-column>
            <el-table-column label="角色名" prop="name" />
            <el-table-column label="描述" prop="description" />
            <el-table-column label="操作">
              <!-- <template v-slot='{$index,row}'> -->
              <template v-slot="{row}">
                <el-button type="text" @click="permissionSet(row.id)">分配权限</el-button>
                <el-button type="text" @click="edit(row)">修改</el-button>
                <el-button type="text" @click="del(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="page">
            <el-pagination
              :current-page="page.page"
              :page-sizes="[1, 2, 3, 20]"
              :page-size="page.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.totalPage"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="公司信息" lazing>
          <compant style="margin-left:30px" />
        </el-tab-pane>

      </el-tabs>

    </el-card>
    <Add ref="add" :show.sync="show" @getRole="getRole" />
    <!-- 分配权限组件 -->
    <permission ref="permissionSet" :is-show.sync="isShow" />
  </div>
</template>

<script>
import compant from '@/views/setting/components/compant.vue'
import { sysrole, sysroleDelete } from '@/api/setting.js'
import Add from './components/add.vue'
// 引入分配权限组件
import permission from './components/permissionSet.vue'
export default {
  components: {
    compant,
    Add,
    permission
  },
  data() {
    return {
      isShow: false,
      tableList: [],
      page: {
        // 当前页码
        page: 1,
        // 当前页容量
        pagesize: 1,
        totalPage: 5
      },
      show: false
    }
  },
  created() {
    this.getRole()
  },
  methods: {
    // 点击分配权限设置按钮，弹出分配权限按钮
    // 点击分配权限的时候把当前角色的id传给权限设置父组件，渲染权限本来有的默认权限值
    permissionSet(id) {
      this.isShow = true
      this.$refs.permissionSet.id = id
      this.$refs.permissionSet.getDefaultChecked(id)
      // this.$refs.permissionSet.getPermissionInfo()
    },
    // 调用api获取角色信息
    async getRole() {
      const res = await sysrole(this.page)
      this.tableList = res.data.rows
      this.page.totalPage = res.data.total
    },
    handleSizeChange(size) {
      this.page.pagesize = size
      this.page.page = 1
      this.getRole()
    },
    handleCurrentChange(page) {
      this.page.page = page
      // 分页插件中有一个bug，当点击一个页码时，如果修改页容量，而这个页面没有当前页容量时会向服务请求两次接口
      // 当数据庞大的时候会浪费性能
      // 解决办法：在每一次点击页容量修改的时候都把页码赋值到第一页
      this.getRole()
    },
    // 新增角色
    addRole() {
      this.$refs.add.mode = 'add'
      this.show = true
    },
    // 点击删除按钮，删除当前行的角色
    del(id) {
      // 提醒用户是否确定删除
      this.$confirm('您确定要删除此叫角色嘛', '提示').then(async() => {
        // 确定删除
        // 调用api删除角色
        await sysroleDelete(id)
        // 提示删除成功
        this.$message.success('删除成功')
        // 刷新页面----删除的时候存在bug
        // 当删除是最后最后一页最后一个的时候,删除成功后页面重新加载会出现当前页面停留在最后上,
        // 但表格中报出'暂无数据'bug,所以当删除最后一页最后一个数据时手动补上当前页面在重新请求戴数据
        this.page.page = 1
        this.getRole()
      })
    },
    // 点击修改按钮，弹出弹框，把数据渲染到输入框中
    edit(row) {
      this.show = true
      // 把当前行的弹框显示模式改成编辑模式
      this.$refs.add.mode = 'edit'
      // 把当前行的数据深拷贝给form
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
    }
  }

}
</script>

<style lang='scss' scoped>
.setting{
  padding: 15px;
  .addrole{
    margin-bottom: 15px;
  }
  .page{
    margin-top: 20px;
    text-align: right;
  }
}

</style>
